<template>
	<view class="container">
		<view class="p-4">
			<swiper autoplay interval="2000" v-if="bannerList" circular style="height: 340rpx;">
				<swiper-item class="rounded-5" v-for="(item,index) in bannerList" :key='index'>
					<image class="h-100 w-100" :src='item.image'></image>
				</swiper-item>
				<!-- #ifdef MP-WEIXIN -->
				<swiper-item class="rounded-5"
					v-if="WEBCONFIG?.weixin_banner_status && WEBCONFIG?.weixin_banner_status == 1">
					<view class="ad">
						<ad :unit-id="WEBCONFIG?.weixin_banner_ad_id" ad-theme="white"></ad>
					</view>
				</swiper-item>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<swiper-item class="rounded-5"
					v-if="WEBCONFIG?.douyin_banner_status && WEBCONFIG?.douyin_banner_status == 1">
					<view class="ad">
						<ad :unit-id="WEBCONFIG?.douyin_banner_ad_id" ad-theme="white"></ad>
					</view>
				</swiper-item>
				<!-- #endif -->
			</swiper>
			<view class="mt-4">
				<uni-notice-bar single scrollable showIcon :text='WEBCONFIG?.notice'></uni-notice-bar>
			</view>

			<view class="mt-4  rounded-4 box-shadow">
				<uni-grid :column="WEBCONFIG?.nav_number" :showBorder="false" :highlight="false" :square="false">
					<uni-grid-item v-for='(item,index) in navList' :key='index' class="mt-4 mb-4">
						<view class="flex flex-column flex-center flex-1" @click="clickNav(item)">
							<image class="rounded-circle grid-image" :src="item.image">
							</image>
							<view class="title1 mt-1">{{item.name}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="ad  mt-4" v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
				<ad :unit-id="WEBCONFIG.weixin_video_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-TOUTIAO -->
			<view class="ad  mt-4" v-if="WEBCONFIG?.douyin_video_status && WEBCONFIG?.douyin_video_status == 1">
				<ad :unit-id="WEBCONFIG?.douyin_video_ad_id" ad-theme="white"></ad>
			</view>
			<!-- #endif -->

			<view class="mt-4  rounded-4 box-shadow p-4">
				<view class="h7 font-weight-600">拍照搜题</view>
				<view class="line mt-4"></view>
				<view class="flex flex-row  mt-4">
					<view class="rounded-3 flex-1 mr-2 content flex flex-row flex-center p-3"
						:style="{backgroundColor: WEBCONFIG?.questions_color}"
						@click="$page.switch('/pages/search/index')">
						<image class="rounded-circle content-image" :src="WEBCONFIG?.questions_image">
						</image>
						<view class="ml-4 title1">{{WEBCONFIG?.questions_title}}</view>
					</view>
					<view class="rounded-3 flex-1  ml-2 content flex flex-row flex-center p-3"
						:style="{backgroundColor: WEBCONFIG?.exam_color}" @click="$page.open('/pages/exam/index')">
						<image class="rounded-circle content-image" :src="WEBCONFIG?.exam_image">
						</image>
						<view class="ml-4 title1">{{WEBCONFIG?.exam_title}}</view>
					</view>
				</view>
				<view class="line mt-4"></view>
				<view class="flex flex-row flex-x-space-between p-4" v-if='USERINFO'>
					<view class="flex flex-column flex-center" v-if="USERINFO?.is_vip=='1'">
						<view class="desc">剩余次数</view>
						<view class="title1">
							<span class="h5">{{USERINFO?.points}}</span>次
						</view>
					</view>
					<view class="flex flex-column flex-center" v-else>
						<view class="desc">vip到期时间</view>
						<view class="title1" v-if='calculateDayDiff(USERINFO?.vip_time)>0'>
							剩<span class="h5">{{calculateDayDiff(USERINFO?.vip_time)}}</span>天
						</view>
						<view class="title1" v-else>
							<span class="h5">今</span>日到期
						</view>

					</view>

					<view class="vertical-line"></view>
					<view class="flex flex-column flex-center">
						<view class="desc">邀请人数</view>
						<view class="title1">
							<span class="h5">{{USERINFO?.invite}}</span>人
						</view>
					</view>

					<view class="vertical-line"></view>
					<view class="flex flex-column flex-center">
						<view class="desc">免费领取</view>
						<view class="title1">
							今日可领<span class="h5">{{num}}</span>次
						</view>
					</view>
				</view>
			</view>

			<view v-if='WEBCONFIG?.index_share_image' class="mt-4" @click="onShareTimeline">
				<button open-type="share">
					<image mode="widthFix" class="w-100" :src="WEBCONFIG?.index_share_image"></image>
				</button>
			</view>

			<view class="mt-6  rounded-4 box-shadow p-4  mb-11">
				<view class="h9">工具栏</view>
				<view class="line mt-4"></view>
				<view class="flex flex-column">
					<!-- #ifdef MP-WEIXIN -->
					<view v-if="WEBCONFIG?.weixin_incentive_status==1">
					<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view v-if="WEBCONFIG?.douyin_incentive_status==1">
						<!-- #endif -->
							<view class="flex flex-row flex-y-center mt-4 mb-3" @click="playAd">
								<view class="w-90">
									<view class="title mb-2">观看视频</view>
									<view class="desc mb-2">快速免费获得搜题次数</view>
								</view>
								<uni-icons type="right" size="20"></uni-icons>
							</view>
							<view class="line"></view>
						</view>
						<view class="flex flex-row flex-y-center mt-4 mb-3"
							@click="$page.switch('/pages/question/index')">
							<view class="w-90">
								<view class="title mb-2">全部题库</view>
								<view class="desc mb-2">答题技巧快速练习</view>
							</view>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
						<view class="line"></view>
					</view>
				</view>
			</view>

			<x-tabbar page="/pages/index/index"></x-tabbar>

			<view class="box flex flex-center" v-if='showRed'>
				<view class="redbox" :style="'background-image: url('+ WEBCONFIG?.hb+');'">
					<view class="wrapBox">
						<view class="tips text-stroke">{{WEBCONFIG?.red_title}}</view>
						<view class="money text-stroke">{{WEBCONFIG?.red_illustrate}}</view>
						<view class="tips text-stroke">{{WEBCONFIG?.red_tips}}</view>
						<view class="btn" @click="showRed=false;$page.open('/pages/package/index')">
							{{WEBCONFIG?.red_btn}}
						</view>
					</view>
					<view class="close" @click="showRed=false">
						<icon type="clear" size="30" color="#fff" />
					</view>
				</view>
			</view>
		</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow, onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
	import { $http, $page, useStorage, $system } from '@/utils/index';
	import { useUserStore, useWebConfigStore, useRefs } from "@/stores/index";
	import { initAd } from '@/utils/ad'
	const bannerList = ref()
	const navList = ref()
	const storage = useStorage()
	const showRed = ref(false)
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	//用户信息
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	const num = ref(0)
	let ad : any;
	onLoad((option : any) => {
		uni.hideTabBar();
		// #ifndef H5
		login()
		// #endif
		getBanner()
		getNav()
		uni.$once('initConfig', () => {
			ad = initAd();
			showRed.value = WEBCONFIG.value.red_show == '1' ? true : false
		})
		// #ifdef H5
		const script = document.createElement('script');
		script.type = "text/javascript";
		script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
		document.body.appendChild(script)
		script.onload = () => {
			mpShare()
		}
		// #endif
	})


	onShow(() => {
		ad && ad.showInterstitial().catch((err : any) => { console.log(err) })
		if (USERINFO?.value?.id) {
			getNum()
		}
	})

	const getNum = () => {
		$http.get('User/getPoints').then(res => {
			num.value = res.data
		})
	}
	const calculateDayDiff = ((timestamp : number) => {
		let currentDate = new Date(); // 当前时间
		let targetDate = new Date(timestamp * 1000); // 传入的时间戳对应的日期
		let timeDiff = targetDate.getTime() - currentDate.getTime(); // 时间差，以毫秒为单位
		let dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); // 将时间差转换为天数
		return dayDiff
	})
	//用户登录
	const login = (() => {
		const { setUserInfo } = useUserStore();
		let appid = $system.appid()
		let puid = storage.get('PUID.' + appid) || 0
		let providerType = 'weixin'
		// #ifdef MP-TOUTIAO
		providerType = 'toutiao'
		// #endif
		uni.login({
			provider: providerType,
			success: function (res) {
				$http.post('Login/login', { data: { pid: puid, type: providerType, code: res.code } }).then((result : any) => {
					setUserInfo(result.data).catch(() => { });
					getNum()
				})
			},
			fail(err) {
				console.log(err)
			}
		})
	})

	//获取导航
	const getNav = () => {
		$http.get('Nav/getList').then(res => {
			navList.value = res.data
		})
	}
	//获取轮播图
	const getBanner = () => {
		$http.get('Banner/getList').then(res => {
			bannerList.value = res.data
		})
	}

	const mpShare = () => {
		$http.get('Mp/getConfig').then(res => {
			wx.ready(function () {
				wx.updateAppMessageShareData({
					title: WEBCONFIG.value.share_title, // 分享标题
					desc: WEBCONFIG.value.share_title, // 分享描述
					link: res.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: WEBCONFIG.value.share_image, // 分享图标
					success: function () {
					}, catch: (err : any) => {
					}
				})
			});
			wx.error(function (res) {
			});
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				...res.data
			});
		})
	}

	//导航栏点击事件
	const clickNav = ((e : any) => {
		let item = e
		switch (+item.type) {
			case 1://页面跳转
				$page.open(item.path)
				break;
			case 2://tab跳转
				$page.switch(item.path)
				break;
			case 3://webview
				$page.open('/pages/webview/index?url=' + item.path)
				break;
			case 4://小程序跳转
				uni.navigateToMiniProgram({
					appId: item.appid,
					path: item.path,
					success(res) {
						console.log('成功', res)
					}
				})
				break;
		}
	})
	//分享
	onShareTimeline(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})

	onShareAppMessage(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})
	//播放视频
	const playAd = (() => {
		uni.showModal({
			title: '提示',
			content: '是否播放激励广告?',
			success(res : any) {
				if (res.confirm == true) {
					$http.get('User/isPoints').then((result : any) => {
						if (result.data == true) {
							ad.show().then((status : any) => {
								if (status && status.isEnded || status === undefined) {
									$http.get('User/addPoints').then(res => {
										USERINFO.value.points += 1
										userStore.setUserInfo(USERINFO.value)
										uni.showToast({
											title: '增加次数成功',
											icon: 'none'
										})
										getNum()
									})
								}
							})
						} else {
							uni.showToast({
								title: '今日观看次数已达上限',
								icon: 'none'
							})
						}
					})
				}
			}
		})
	})
</script>


<style lang="scss" scoped>
	.notice {
		box-shadow: 0 0 4rpx 2rpx #ececec;
		border-radius: 30rpx;
	}

	.notify-swiper {
		height: 80rpx;
		background-color: var(--xl-bg-white);
		border-radius: 30rpx;

		&-title {
			line-height: 80rpx;
		}
	}

	.mb-11 {
		margin-bottom: 200rpx;
	}

	.line {
		height: 1px;
		background-color: #e2e2e2;
		width: 100%;
	}

	.vertical-line {
		width: 1px;
		height: auto;
		background-color: #e2e2e2;
	}



	.grid-image {
		width: 100rpx;
		height: 100rpx;
	}

	.content-image {
		width: 80rpx;
		height: 80rpx;
	}

	.title {
		font-size: 30rpx;
		color: #474747;
	}

	.title1 {
		font-size: 26rpx;
		color: #363636;
	}

	.desc {
		font-size: 26rpx;
		color: #7c7c7c;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* 半透明黑色 */
		z-index: 666;

		.redbox {
			width: 60%;
			padding: 10rpx 0rpx;
			height: 600rpx;
			background-repeat: no-repeat;
			background-size: 100%;

			.close {
				text-align: center;
				margin-top: 15%;
			}

			.wrapBox {
				padding: 10rpx 0rpx;
				text-align: center;
				margin-top: 35%;

				.tips {
					font-size: 26rpx;
					margin-top: 20rpx;
					color: #fff;
					font-weight: bold;

					text {
						font-weight: normal;
					}
				}

				.money {
					font-size: 36rpx;
					color: #fff;
					margin-top: 20rpx;
					font-weight: bold;
				}

				.btn {
					width: 60%;
					margin: 20rpx auto;
					margin-top: 20rpx;
					padding: 10rpx 0px;
					text-align: center;
					background: linear-gradient(to bottom, #FFF04D, #FFE06B);
					border-radius: 34px;
					font-size: 30rpx;
					color: #CF2A2A;
					font-weight: bold;
				}
			}
		}
	}

	.text-stroke {
		color: white;
		/* 文字填充色 */
		text-shadow:
			-2px -2px 0 #ff0000,
			2px -2px 0 #ff0000,
			-2px 2px 0 #ff0000,
			2px 2px 0 #ff0000;
		/* 文字描边色 */
	}
</style>